<template>
  <div>
    <input type="text"  @keyup.enter="addTodo">

    <row v-for="todo in arr" :key="todo.id" :todo="todo" ></row>
    <btn @changeBtnState ="changeBtnState" :todobt="btn2"></btn>
  </div>

</template>

<script>
import Btn from './btn'
import Row from './row'
export default {
  metaInfo: {
    title: 'The Todo App'
  },
  components: {
    Btn,
    Row
  },
  computed: {
    arr () {
      return this.list.filter((item) => {
        if (this.btn2 === 'all') {
          return true
        }
        return (this.btn2 === 'finish') === item.isfinish
      })
    }
  },
  data () {
    return {
      btn2: 'all',
      value: '',
      list: [],
    }
  },
  methods: {
    changeBtnState (btn) {
      console.log(btn)
      this.btn2 = btn;
    },
    addTodo (event) {
      this.list.push({id: this.id, text: event.target.value, isfinish: false})
    }

  }
}
</script>

<style>

</style>
